<template>


  <div>

    <!--  查询-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">


        <el-form-item label="等级">
          <el-select v-model="queryParam.level" placeholder="请选择" clearable  >
            <el-option key="1" label="普通事件" :value="1"/>
            <el-option key="2" label="重要事件" :value="2"/>
            <el-option key="3" label="核心事件" :value="3"/>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="success" size="mini" @click="getListPage">查询</el-button>
          <el-button type="info" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveBefore">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>



    <!--列表-->
    <el-card style="margin-top: 10px; max-height: 650px; height: 650px" >

      <el-timeline>

        <el-timeline-item v-for="item in tableData" :key="item.id" :timestamp="item.triggerTime"
                          :type="transformLevel(item.level)" placement="top">
          <el-card>
            <el-row :gutter="20">
              <el-col :span="21">
                <p style="font-size: 10px;">{{ item.event }}</p>
              </el-col>

              <el-col :span="3">
                <el-button @click="openUpdBefore(item)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                <el-button @click="delTips(item)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </el-col>
            </el-row>

          </el-card>
        </el-timeline-item>

      </el-timeline>

    </el-card>


    <OpsSiteTimeLineSaveUpd  ref="OpsSiteTimeLineSaveUpdRef" @getListPage="getListPage"/>

  </div>

</template>


<script>

import http from '@/utils/http'
import OpsSiteTimeLineSaveUpd  from './OpsSiteTimeLineSaveUpd.vue'


export default {
  name: "OpsSiteTimeLineList",
  components: {
    OpsSiteTimeLineSaveUpd,
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        siteId: this.$route.query.siteId,
        level: null,
      },
      // 分页参数
      pageConfig: {
        // 每页记录数
        size: 20,
        // 当前页码
        current: 1,
        // 总记录数
        total: 0,
      },
      // 表格数据
      tableData: [],
    }
  },
  methods: {
    /**
     * 将数字等级转换为页面识别的等级信息
     * @param level
     */
    transformLevel(level){
      if (level === 3) {
        return "danger";

      } else if (level === 2) {
        return "warning";

      } else {
        return "success";
      }
    },
    /**
     * 打开保存的弹框
     */
    openSaveBefore() {
      this.$refs.OpsSiteTimeLineSaveUpdRef.init('save', null)
    },
    /**
     * 查看之前触发
     * @param obj 这一行数据
     */
    openViewBefore(obj){
      this.$refs.OpsSiteTimeLineDetailedRef.init(obj)
    },
    /**
     * 打开修改之前的的弹出框
     * @param obj 修改的值
     */
    openUpdBefore(obj) {
      this.$refs.OpsSiteTimeLineSaveUpdRef.init('upd', obj)
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delTips(obj) {
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delOpsSiteTimeLine(obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delOpsSiteTimeLine(obj) {
      http.post("opsSiteTimeLine/delOpsSiteTimeLine", {
        id: obj.id,
      }).then(response => {
        let res = response.data;
        this.getListPage()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error (error.message)
      })
    },
    /**
     * 分支分页查询列表
     */
    getListPage() {
      this.queryParam.current = this.pageConfig.current
      this.queryParam.size = this.pageConfig.size
      http.post("/opsSiteTimeLine/getListPage", this.queryParam).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        this.pageConfig.total = data.total;
        this.pageConfig.current = data.current;
        this.pageConfig.size = data.size;
        // 表格数据
        this.tableData = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 分页被改变的时候
     * @param value 当前页
     */
    pageCurrentChange(value) {
      this.pageConfig.current = value
      this.getListPage()
    },
     /**
     * 重置查询条件
     */
    resetQuery() {
      this.queryParam = {
        siteId: this.$route.query.siteId,
        level: null,
      }
    },
     /**
     * 分页前重置分页参数
     */
    getPageListBefore() {
      this.pageConfig.current = 1
      this.getListPage()
    },
  },
  // 进入马上执行
  mounted() {
    this.getListPage()
    this.$store.commit ('navigationListChange', [
      {name: '场所项目时间轴', url: '/toOpsSiteTimeLineList', query: {}},
    ])
  },
}
</script>

<style scoped>

</style>

